import { DarkModeIcon, LightModeIcon, style, ThemeMode } from '@ycx/ui';
import { createStyles } from 'antd-style';
import { useSetTheme, useSiderCollapsed, useTheme } from '@/store/settingsStore.ts';
import Segmented from '@/components/Segmented';
import { Avatar, Dropdown, Tooltip } from 'antd';
import type { MenuProps } from 'antd';
import { useRef } from 'react';
import ChangePwdModal, { ChangePwdModalRef } from '@/pages/personal/ChangePasswordModal.tsx';
import PersonalInfoModal, { PersonalInfoModalRef } from '@/pages/personal/PersonalInfoModal.tsx';
import { useLogout, useUserInfo } from '@/store/userStore.ts';

const useStyles = (theme: ThemeMode) => {
  const isLight = theme === ThemeMode.Light;
  return createStyles(({ css }) => {
    const iconSize = css`
      width: 30px;
      height: 30px;
      justify-content: center;
    `;
    return {
      lightIcon: css`
        ${iconSize};
        color: ${isLight ? style.primaryColor : style.fontColorLevelThreeDark};
      `,
      darkIcon: css`
        ${iconSize};
        color: ${isLight ? style.fontColorLevelThreeLight : style.primaryColor};
      `,
      container: css`
        box-shadow: 0 -0.5px 0 0 var(--ycx-divider-color);
        //border-top: 0.5px solid var(--ycx-divider-color);
      `,
    };
  });
};

const Footer = () => {
  const theme = useTheme();
  const collapsed = useSiderCollapsed();
  const { styles } = useStyles(theme)();
  const setTheme = useSetTheme();
  const modalRef = useRef<ChangePwdModalRef>(null);
  const infoModalRef = useRef<PersonalInfoModalRef>(null);
  const userInfo = useUserInfo();
  const logout = useLogout();

  const options = [
    {
      value: ThemeMode.Light,
      label: (
        <Tooltip title="纯净模式">
          <div>
            <LightModeIcon className={styles.lightIcon} />
          </div>
        </Tooltip>
      ),
    },
    {
      value: ThemeMode.Dark,
      label: (
        <Tooltip title="沉浸模式">
          <div>
            <DarkModeIcon className={styles.darkIcon} />
          </div>
        </Tooltip>
      ),
    },
  ];

  const handleChange = (val: string | number) => setTheme(val as ThemeMode);

  const items: MenuProps['items'] = [
    {
      key: 'personalCenter',
      label: <div onClick={() => infoModalRef.current?.open()}>个人中心</div>,
    },
    {
      key: 'changePwd',
      label: <div onClick={() => modalRef.current?.open()}>修改密码</div>,
    },
    {
      key: 'logout',
      label: <div onClick={() => logout()}>退出登录</div>,
    },
  ];

  return (
    <div
      className={`mt-4 flex justify-between pt-6 ${collapsed ? 'flex-col-reverse gap-2' : 'flex-row'} items-center ${collapsed ? '' : styles.container} select-none`}
    >
      {/*TODO*/}

      <Dropdown placement="topRight" arrow menu={{ items }}>
        <Avatar
          src={
            userInfo?.headImage
              ? `https://oss.uconcern.com/${userInfo?.headImage}`
              : 'https://oss.uconcern.com/2024-10-28/开发/7086515189870592avatar.png'
          }
        />
      </Dropdown>

      <Segmented options={options} value={theme} onChange={handleChange} />
      <ChangePwdModal ref={modalRef} />
      <PersonalInfoModal ref={infoModalRef} />
    </div>
  );
};

export default Footer;
